import React, { Component, Suspense, Fragment } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { ChromePicker } from 'react-color';
import moment from 'moment';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Button, Input, Upload, message, Radio, Table, Spin } from 'antd';
import Editor from '@/utils/Editor';
import { wxBind } from '@/services/wxbind';
import styles from "./index.less";
import imgURL from '../../../assets/accessSettings/icon-a.png';
import LogoimgURL from '../../../assets/accessSettings/icon-头像.png';
import khmrimgURL from '../../../assets/accessSettings/icon-机器人.png';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1131883_fqf69hupewt.js', // 在 iconfont.cn 上生成
});
class WxAccess extends Component {
  constructor() {
    super();
    this.state = {
      yuyhc: '1', // 语音合成
      yuysran: '1', // 语音输入按钮
      color: '#19c3f3',
      displayColorPicker: false,
      loading: false,
      loadingA: false,
      loadingB: false,
      ckdxSize: '1',
      mrckdxweb: '1',
      mrckdxydd: '1',
      commonProblemList: [{ name: '', item: '' }],
      pdxs: true,
      content: '',
      login: false,
      dataSource: [],
      total: '',
      spinning: false
    };
  }

  componentDidMount() {
    this.setState({
      login: true,
      spinning:true
    })
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'accessSettings/fetchc',
        payload: { robotId: currentUser.robotId },
        callback: res => {
          console.log('列表数据', res);
          let temp = res.items
          temp.map((item, index) => item['key'] = index)
          this.setState({
            dataSource: temp,
            total: res.total,
            login: false,
            spinning:false
          })
        },
      });
    });
  }

  handleChangeComplete = (color) => {
    console.log(color.hex)
    this.setState({ color: color.hex });
  };

  // ----------- 窗口颜色-----------------------
  handleClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker })
  };

  handleClose = () => {
    this.setState({ displayColorPicker: false })
  };

  // ----------------客户默认头像----------
  getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  beforeUpload = (file) => {
    console.log(file)
    const isJPG = file.type;
    const isLt2M = file.size / 1024 / 1024 < 1;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJPG && isLt2M;
  }

  handleChangeA = info => {
    console.log(info)
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrla =>
        this.setState({
          imageUrla,
          loading: false,
        }),
      );
    }
  };

  // ------------- 解决状态--------------------


  // ------------- 机器人默认头像--------------
  handleChangeB = info => {
    console.log(info)
    if (info.file.status === 'uploading') {
      this.setState({ loadingA: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrlb =>
        this.setState({
          imageUrlb,
          loadingA: false,
        }),
      );
    }
  };

  unbound = text => {
    console.log(text)
  }

  wxbinding = () => {
    wxBind()
  }




  render() {

    const popover = {
      position: 'absolute',
      zIndex: '2',
    }
    const gbcolor = {
      background: this.state.color,
    }
    const cover = {
      position: 'fixed',
      top: '0px',
      right: '0px',
      bottom: '0px',
      left: '0px',
    }
    const body = '</body>'
    const { getFieldDecorator } = this.props.form;
    const FormItemLayont = {
      labelCol: {
        sm: 24,
        md: 4,
      },
      wrapperCol: {
        sm: 24,
        md: 16
      }
    }
    // logo头像
    const uploadButtonb = (
      <div className={styles.kzimg}>
        <img />
      </div>
    );
    // 客服头像
    const uploadButton = (
      <div className={styles.kzimg}>
        <img src={LogoimgURL} />
      </div>
    );
    // 机器人头像
    const uploadButtona = (
      <div className={styles.kzimg}>
        <img src={khmrimgURL} />
      </div>
    );
    const imageUrla = this.state.imageUrla;
    const imageUrlb = this.state.imageUrlb;
    const imageUrlc = this.state.imageUrlc;
    const columns = [
      {
        title: '微信公众号',
        width: 'calc(30vw)',
        dataIndex: 'APPId'
      },
      {
        title: '接入时间',
        width: 'calc(40vw)',
        dataIndex: 'createTime',
      },

      {
        title: '操作',
        render: (text, row) => {
          return (
            <Button icon='link' onClick={() => this.unbound(row)}>解除绑定</Button>
          )
        }
      }
    ]
    return (
      <div>
        <Spin spinning={this.state.spinning}>
          <span className={styles.titlep}><span>公众号接入</span></span>
          <div className={styles.appjr}>
            <div className={styles.webAccess}>
              <Icon style={{ fontSize: '40px' }} type="wechat" />
              <span>微信公众号接入说明</span>
            </div>
          </div>
          <div style={{ height: 30 }}></div>
          <span className={styles.titlep}><span>公众号管理</span></span>
          <Button style={{ float: 'right' }} onClick={this.wxbinding} >绑定公众号</Button>
          <div style={{ margin: '30px 0px 0px 0px' }} className={styles.webSettcx}>
            <Spin spinning={this.state.login}>
              <Table
                style={{ padding: '0px 30px 0px 30px' }}
                columns={columns}
                dataSource={this.state.dataSource}//数据
                onChange={this.handleChange}
                pagination={false}
              />
            </Spin>
          </div>
        </Spin>
      </div>

    );
  }
}
export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(WxAccess));